<template>
  <!-- 主页 -->
  <div class="index-page">
    <!-- 主显示区 -->
    <div class="page-content">
      <home-card/>
    </div>
    <!-- 按钮跳转区 -->
    <div class="console">
      <div class="resolution" @click="ToResolution">resolution</div>
      <div class="play-game" @click="ToPlayGame">play-game</div>
    </div>
  </div>
</template>

<script>
import homeCard from '@/components/homeCard.vue'
export default {
  components:{ homeCard },
  methods:{
    ToResolution(){
      this.$router.push('/404')
    },
    ToPlayGame(){
      this.$router.push({name:'home'})
    }
  },
}

</script>
<style scoped lang="scss">
.index-page{
  width: 100%;
  height: 100vh;
  background-color: #212121;
  .page-content{
    width: 100%;
    height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .console{
    width: 100%;
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding-top: 10px;
    .resolution{
      width: 25%;
    }
    .play-game{
      width: 25%;
    }
    div {
      color: #090909;
      padding: 0.7em 1.7em;
      font-size: 18px;
      border-radius: 0.5em;
      background: #e8e8e8;
      cursor: pointer;
      border: 1px solid #e8e8e8;
      transition: all 0.3s;
      box-shadow: 6px 6px 10px #c5c5c5, -6px -6px 10px #ffffff;
    }

    div:hover {
      border: 1px solid white;
    }

    div:active {
      box-shadow: 4px 4px 10px #c5c5c5, -4px -4px 10px #ffffff;
    }

  }
}
</style>